{% extends "base.html" %}

{% block stylesheets %}
    <style>

    </style>
{% endblock %}

{% block page_content %}
    {% for message in get_flashed_messages() %}
        <div class="alert alert-warning">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            {{ message }}
        </div>
    {% endfor %}
    <ol class="breadcrumb">
        <li>Home</li>
        <li>PPT水印</li>
        <li class="active">提取水印</li>
    </ol>
    <div class="row">
        <div class="page-header">
            <div class="col-sm-offset-1">
                <h1>提取水印
                    <small>&nbsp;&nbsp;&nbsp;&nbsp;PPT</small>
                </h1>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <form action="" class="form-horizontal" method="post" enctype="multipart/form-data">
                <input type="hidden" id="nonce" name="nonce">
                <div class="form-group">
                    <label class="col-sm-4 control-label">选择需要提取水印的PPT：</label>
                    <div class="col-sm-8" id="file_ppt1Group">
                        <input class="" id="file_ppt1" type="file" name="ppt1"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">提取水印的PPT页码：</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="number" name="page1"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">选择不含水印的原PPT：</label>
                    <div class="col-sm-8" id="file_ppt2Group">
                        <input class="" id="file_ppt2" type="file" name="ppt2"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">原PPT页码：</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="number" name="page2"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-4 col-sm-10">
                        <span class="help-block">注意:请导入PPT文件，后缀为pptx；页码需有效！</span>
                        <input class="btn btn-default" id="submit" type="submit" value="上传文件"/>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-4">
            <div class="panel panel-info">
                <div class="panel-heading">功能介绍</div>
                <div class="panel-body">
                    <p>根据两PPT及对应页码，按顺序对比提取水印</p>
                    <p><b>注：</b>请输入PPT的合理页码</p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PPT对应页码中的图片数目需一致</p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;水印图尺寸应不大于原图</p>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block scripts %}
    {{ super() }}

    {# 判断file_ppt1是否为空及后缀 #}
    <script>

        let file_ppt1 = $("#file_ppt1");

        $(document).ready(function () {
            $("#submit").click(function () {
                var file = file_ppt1.val();
                if (file == "") {
                    let file_ppt1Group = $("#file_ppt1Group");
                    file_ppt1Group.addClass("has-error");
                    file_ppt1Group.append('<span class="help-block" id="file_ppt1textHelp1">文件不能为空！</span>');
                    return false
                } else {
                    //检验文件类型是否正确
                    var exec = (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : '';
                    if (exec != "pptx") {
                        let file_ppt1Group = $("#file_ppt1Group");
                        file_ppt1Group.addClass("has-error");
                        file_ppt1Group.append('<span class="help-block" id="file_ppt1textHelp2">文件后缀应为pptx!</span>');
                        return false;
                    }
                }
                return true;
            });
        });

        file_ppt1.click(function () {
                $("#file_ppt1textHelp1").remove();
                $("#file_ppt1textHelp2").remove();
                $("#file_pptGroup").removeClass("has-error");
            }
        )


    </script>

    {# 判断file_ppt2是否为空及后缀 #}
    <script>

        let file_ppt2 = $("#file_ppt2");

        $(document).ready(function () {
            $("#submit").click(function () {
                var file = file_ppt2.val();
                if (file == "") {
                    let file_ppt2Group = $("#file_ppt2Group");
                    file_ppt2Group.addClass("has-error");
                    file_ppt2Group.append('<span class="help-block" id="file_ppt2textHelp1">文件不能为空！</span>');
                    return false
                } else {
                    //检验文件类型是否正确
                    var exec = (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : '';
                    if (exec != "pptx") {
                        let file_ppt2Group = $("#file_ppt2Group");
                        file_ppt2Group.addClass("has-error");
                        file_ppt2Group.append('<span class="help-block" id="file_ppt2textHelp2">文件后缀应为pptx!</span>');
                        return false;
                    }
                }
                return true;
            });
        });

        file_ppt2.click(function () {
                $("#file_ppt2textHelp1").remove();
                $("#file_ppt2textHelp2").remove();
                $("#file_ppt2Group").removeClass("has-error");
            }
        )


    </script>
    
{% endblock %}
